import React, {useRef, useState} from 'react';
import {message, Modal, Tabs} from 'antd';
import {OpResourcesManager, WorksManager} from "@/services/api-functions";
import {isSuccess} from "@/utils/utils";
import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {SYS_ENUMS} from "@/utils/constants";

interface AssociateSelect {
  useType: 'RESOURCES' | 'WORKS' | 'ARTICLE'
  initType: 'RESOURCES' | 'WORKS' | 'ARTICLE'
  visible: boolean
  title: string
  onCancel: Function
  onSelect: Function
  width?: number
}

const AssociateSelect: React.FC<AssociateSelect> = ({ visible, onCancel, title, onSelect, width, useType, initType}) => {

  const [type, setType] = useState<string>(initType)

  const onOk = (select: any) => {
    if (select) {
      onSelect(type, select)
      onCancel()
    } else {
      message.error('请选择')
    }
  }

  const actionRef = useRef<ActionType>();

  const resourceColumns: ProColumns[] = [
    {
      title: '标题',
      dataIndex: 'title',
      ellipsis: true,
    },
    {
      title: '分类',
      dataIndex: 'classification',
      valueEnum: SYS_ENUMS.RESOURCE_CLASSIFICATION,
      hideInSearch: true,
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'sellingState',
      valueEnum: SYS_ENUMS.RESOURCE_STATUS,
      hideInSearch: true,
      width: 100,
    },
    {
      title: '设计师',
      dataIndex: 'nickName',
      ellipsis: true,
      hideInSearch: true,
      width: 150,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInSearch: true,
      width: 100,
      hideInForm: true,
      render: (_, record) => [
        <a key="edit" onClick={()=>onOk(record)}>选择</a>,
      ],
    },
  ];

  const contentColumns: ProColumns[] = [
    {
      title: '标题',
      dataIndex: 'title',
      ellipsis: true,
    },
    {
      title: '设计师',
      dataIndex: ['userDto', 'nickName'],
      ellipsis: true,
      hideInSearch: true,
      width: 120,
    },
    {
      title: '审核状态',
      dataIndex: 'auditState',
      valueEnum: SYS_ENUMS.RESOURCE_AUDIT_STATE,
      width: 130,
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInSearch: true,
      width: 100,
      hideInForm: true,
      render: (_, record) => [
        <a key="edit" onClick={()=>onOk(record)}>选择</a>,
      ],
    },
  ];

  return (
    <Modal
      destroyOnClose
      width={width ?? 750}
      title={title}
      visible={visible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Tabs destroyInactiveTabPane={true} activeKey={type} onTabClick={(activeKey) => setType(activeKey)}>
        {
          useType !== 'RESOURCES' && <Tabs.TabPane forceRender tab='资源' key="RESOURCES">
            <ProTable<any, any>
              actionRef={actionRef}
              rowKey="key"
              search={{
                labelWidth: 120,
              }}
              toolBarRender={false}
              request={async (params) => {

                const {data: {data, total}, code}: any = await OpResourcesManager.pageQuery(params);

                return {data: data || [], success: isSuccess(code), total: isSuccess(code) ? total : 0};
              }}
              columns={resourceColumns}
              pagination={{pageSize: 10}}
            />
          </Tabs.TabPane>
        }
        {
          useType !== 'WORKS' && <Tabs.TabPane forceRender tab='作品' key="WORKS">
            <ProTable<any, any>
              actionRef={actionRef}
              rowKey="key"
              search={{labelWidth: 120,}}
              toolBarRender={false}
              request={async (params) => {

                const {data: {data, total}, code}: any = await WorksManager.workQueryList(params);

                return {data: data || [], success: isSuccess(code), total: isSuccess(code) ? total : 0};
              }}
              columns={contentColumns}
              pagination={{pageSize: 10}}
            />
          </Tabs.TabPane>
        }
        {
          useType !== 'ARTICLE' && <Tabs.TabPane forceRender tab='文章' key="ARTICLE">
            <ProTable<any, any>
              actionRef={actionRef}
              rowKey="key"
              search={{labelWidth: 120,}}
              toolBarRender={false}
              request={async (params) => {

                const {data: {data, total}, code}: any = await WorksManager.articleQueryList(params);

                return {data: data || [], success: isSuccess(code), total: isSuccess(code) ? total : 0};
              }}
              columns={contentColumns}
              pagination={{pageSize: 10}}
            />
          </Tabs.TabPane>
        }
      </Tabs>
    </Modal>
  );
};

export default AssociateSelect;
